<template>
	<div class="creator">
		<div class="creator-container flex flex-col">
			<div class="creator-container-top flex justify-between">
				<div class="creator-container-top-btns">
					<button :class="tabFlag === 1 ? 'active' : ''" @click="handleCreator">创作者维度</button>
					<button :class="tabFlag === 2 ? 'active' : ''" @click="handleGoods">商品维度</button>
				</div>
				<div class="creator-container-top-date">更新时间：{{ updateDate }}</div>
			</div>
			<div class="creator-container-page flex flex-col flex-1">
				<div class="creator-container-page-search mt-1">
					<!-- 创作者维度 -->
					<div v-show="tabFlag === 1" class="flex justify-between">
						<n-form inline :model="creatorFormValue" label-placement="left" :show-feedback="false">
							<n-form-item label="创作者信息：">
								<n-input
									v-model:value="creatorFormValue.keyWord"
									placeholder="请输入创作者名称/电话"
									@update:value="handleSearch"
								></n-input>
							</n-form-item>
							<n-form-item label="状态：" path="value">
								<n-select
									v-model:value="creatorFormValue.status"
									clearable
									:options="statusOptions"
									filterable
									class="w-193px"
									@update:value="handleSearch"
								/>
							</n-form-item>
							<n-form-item label="申请时间：">
								<n-date-picker
									v-model:value="creatorFormValue.applyTime"
									type="daterange"
									clearable
									@update:value="handleApplyTimeChange"
								/>
							</n-form-item>
						</n-form>
						<button
							style="
								width: 80px;
								line-height: 32px;
								background: #ddd;
								border-radius: 4px;
								font-size: 13px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							"
							@click="handelReset"
						>
							重置
						</button>
					</div>
					<!-- 商品维度 -->
					<div v-show="tabFlag === 2" class="flex justify-between">
						<n-form inline :model="goodsFormValue" label-placement="left" :show-feedback="false">
							<n-form-item label="商品信息：">
								<n-input
									v-model:value="goodsFormValue.search"
									placeholder="请输入商品名称/商品ID"
									@update:value="handleSearch"
								></n-input>
							</n-form-item>
						</n-form>
						<button
							style="
								width: 80px;
								line-height: 32px;
								background: #ddd;
								border-radius: 4px;
								font-size: 13px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							"
							@click="handelReset"
						>
							重置
						</button>
					</div>
				</div>
				<div class="creator-container-page-table mt-2">
					<n-data-table
						:columns="columns"
						:data="tabelData"
						:pagination="tabFlag === 1 ? creatorPagination : goodsPagination"
						:remote="true"
						:loading="tableLoading"
						size="small"
						flex-height
						:style="{ height: '100%' }"
					>
						<template #empty>
							<div class="flex flex-col items-center">
								<img style="height: 100px" src="@/assets/images/img_form_none@3x.png" alt="" />
								<span style="color: #666">暂无数据</span>
							</div>
						</template>
					</n-data-table>
				</div>
			</div>
		</div>
		<!-- 禁用启用 -->
		<n-modal
			v-model:show="changeStatus.flag"
			preset="card"
			style="width: 280px; height: 200px"
			title="提示"
			:bordered="false"
			:segmented="segmented"
		>
			<div style="line-height: 20px; font-size: 14px; font-weight: 500; color: #000000">
				{{ changeStatus.content }}
			</div>
			<template #footer>
				<div class="flex justify-end">
					<button
						style="width: 80px; line-height: 32px; background: #ccc; border-radius: 4px"
						@click="changeStatus.flag = false"
					>
						取消
					</button>
					<button
						v-show="changeStatus.status === 0"
						class="ml-1"
						style="
							font-size: 13px;
							font-family: PingFangSC-Medium, PingFang SC;
							width: 94px;
							color: #fff;
							line-height: 32px;
							background: #1d6fe9;
							border-radius: 4px;
						"
						@click="handleStatusConfirm"
					>
						确认启用
					</button>
					<button
						v-show="changeStatus.status === 1"
						class="ml-1"
						style="
							font-size: 13px;
							font-family: PingFangSC-Medium, PingFang SC;
							width: 94px;
							color: #fff;
							line-height: 32px;
							background: #f55f4e;
							border-radius: 4px;
						"
						@click="handleStatusConfirm"
					>
						确认禁用
					</button>
				</div>
			</template>
		</n-modal>
		<!-- 查看详情 -->
		<ProductDetails v-model:modal="productDetailsModal" :product-id="productId" />
	</div>
</template>
<script setup>
import debounce from 'lodash/debounce';
import moment from 'moment';
import { h, ref, reactive, nextTick, watch } from 'vue';
import { NButton, useMessage } from 'naive-ui';
import ProductDetails from './cmponents/ProductDetails.vue';

// 导入API接口
import { getCreatorList, showOrDisabled, getGoodsList } from '@/api/creator';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';

const router = useRouter();
const route = useRoute();
const message = useMessage();
const segmented = {
	content: 'soft',
	footer: 'soft'
};
// tab切换
const tabFlag = ref(1);
const handleCreator = () => {
	// updateDate.value === null;
	// console.log(updateDate.value);
	if (tabFlag.value != 1) {
		tabFlag.value = 1;
		fetchData();
	}
};
const handleGoods = () => {
	// updateDate.value === null;
	// console.log(updateDate.value);

	if (tabFlag.value != 2) {
		tabFlag.value = 2;
		fetchData();
	}
};
// 更新时间
const updateDate = ref(null);
// 创作者查询条件
const creatorFormValue = reactive({
	pageIndex: 1,
	pageSize: 10,
	endDate: null,
	keyWord: null,
	startDate: null,
	status: null,
	applyTime: null
});
// 商品查询条件
const goodsFormValue = reactive({
	page: 1,
	size: 10,
	search: null
});
const cycleType = ref([
	{ value: 1, label: '每日' },
	{ value: 2, label: '每周' },
	{ value: 3, label: '每月' },
	{ value: 4, label: '每季度' },
	{ value: 5, label: '每年' },
	{ value: 9, label: '一次性' }
]);
const statusOptions = ref([
	{ label: '正常', value: 1 },
	{ label: '已禁用', value: 0 }
]);
// 申请时间改变
// const applyTime = ref(null);
const handleApplyTimeChange = (e) => {
	if (e) {
		creatorFormValue.startDate = moment(e[0]).format('YYYY-MM-DD') + ' 00:00:00';
		creatorFormValue.endDate = moment(e[1]).format('YYYY-MM-DD') + ' 23:59:59';
	} else {
		creatorFormValue.startDate = null;
		creatorFormValue.endDate = null;
	}
	handleSearch();
};
// 搜索
const handleSearch = debounce(() => {
	creatorFormValue.pageIndex = 1;
	goodsFormValue.page = 1;
	fetchData();
}, 300);
// 表格
const columns = ref([]);
const creatorColumns = [
	{
		title: '创作者信息',
		width: '240px',
		render(row) {
			return [
				h('div', {}, `名称：${row.userName || '无'}`),
				h('div', {}, `联系电话：${row.phone || '无'}`),
				h('div', {}, `申请日期：${row.time || '无'}`),
				h('div', {}, `合作方：${row.cooperation || '无'}`)
			];
		}
	},
	{
		title: '状态',
		key: 'statusStr' || '无',
		width: '60px',
		render(row) {
			return [
				h(
					'div',
					{
						style:
							row.status === 0
								? 'width: 46px;text-align: center;border-radius: 4px;font-size:12px;color:#F55F4E;background: rgba(179, 143, 143, 0.08);'
								: row.status === 1
								? 'width: 36px;text-align: center;border-radius: 4px;font-size:12px;color:#57AE59;background: rgba(143, 179, 154, 0.08);'
								: ''
					},
					row.status === 0 ? '已禁用' : row.status === 1 ? '正常' : '无'
				)
			];
		}
	},
	{
		title: '素材信息',
		width: '100px',
		render(row) {
			return [
				h('div', {}, `照片：${row.resourcePhoto || '0'} 张`),
				h('div', {}, `视频：${row.resourceVideo || '0'} 个`)
			];
		}
	},
	{
		title: '探店信息',
		width: '100px',
		render(row) {
			return [
				h('div', {}, `已探店：${row.shop || '0'} 次`),
				h('div', {}, `商品销量：${row.salt || '0'}`)
			];
		}
	},
	{
		title: '素材收益',
		width: '150px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.resourceIncome || '0'}`),
				h('div', {}, `照片收益：¥ ${row.resourcePhotoIncome || '0'}`),
				h('div', {}, `视频收益：¥ ${row.resourceVideoIncome || '0'}`)
			];
		}
	},
	{
		title: '探店收益',
		width: '150px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.shopAllIncome || '0'}`),
				h('div', {}, `探店收益：¥ ${row.shopIncome || '0'}`),
				h('div', {}, `商品收益：¥ ${row.shopProductIncome || '0'}`)
			];
		}
	},
	{
		title: '昨日素材上传',
		width: '120px',
		render(row) {
			return [
				h('div', {}, `照片：${row.dayResourcePhoto || '0'} 张`),
				h('div', {}, `视频：${row.dayResourceVideo || '0'} 个`)
			];
		}
	},
	{
		title: '昨日素材营收',
		width: '150px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.dayResourceIncome || '0'}`),
				h('div', {}, `照片收益：¥ ${row.dayResourcePhotoIncome || '0'}`),
				h('div', {}, `视频收益：¥ ${row.dayResourceVideoIncome || '0'}`)
			];
		}
	},
	{
		title: '昨日探店营收',
		width: '150px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.dayShopAllIncome || '0'}`),
				h('div', {}, `探店收益：¥ ${row.dayShopIncome || '0'}`),
				h('div', {}, `商品收益：¥ ${row.dayProductIncome || '0'}`)
			];
		}
	},
	{
		title: '操作',
		width: '230px',
		render(row, index) {
			return [
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: {
							marginRight: '8px',
							fontSize: '14px',
							color: row.status === 1 ? 'red' : 'green'
						},
						onClick: () => handleStatusChecked(row)
					},
					{
						default: () => {
							if (row.status === 1) {
								return '禁用';
							} else if (row.status === 0) {
								return '启用';
							}
						}
					}
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () =>
							router.push({
								path: '/resource-apply/findListWithAdmin',
								query: { phone: row.phone }
							})
					},
					{ default: () => '素材订单' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () =>
							router.push({
								path: '/apply-review/findListWithAdmin',
								query: { agentInfo: row.phone }
							})
					},
					{ default: () => '探店订单' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () => router.push({ path: '/material/library', query: { create: row.phone } })
					},
					{ default: () => '素材库' }
				)
			];
		}
	}
];
const goodsColumns = [
	{
		title: '创作者信息',
		width: '130px',
		render(row) {
			return [h('div', {}, `ID：${row.productId}`), h('div', {}, `名称：${row.productName}`)];
		}
	},
	{
		title: '素材信息',
		width: '130px',
		render(row) {
			return [
				h('div', {}, `照片：${row.resourcePhoto} 张`),
				h('div', {}, `视频：${row.resourceVideo} 个`)
			];
		}
	},
	{
		title: '探店信息',
		width: '140px',
		render(row) {
			return [h('div', {}, `已探店：${row.shop} 次`), h('div', {}, `商品销量：${row.salt}`)];
		}
	},
	{
		title: '素材收益',
		width: '140px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.resourceIncome}`),
				h('div', {}, `照片收益：¥ ${row.resourcePhotoIncome}`),
				h('div', {}, `视频收益：¥ ${row.resourceVideoIncome}`)
			];
		}
	},
	{
		title: '探店收益',
		width: '140px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.shopAllIncome}`),
				h('div', {}, `探店收益：¥ ${row.shopIncome}`),
				h('div', {}, `商品收益：¥ ${row.shopProductIncome}`)
			];
		}
	},
	{
		title: '昨日素材上传',
		width: '160px',
		render(row) {
			return [
				h('div', {}, `照片：${row.dayResourcePhoto} 张`),
				h('div', {}, `视频：${row.dayResourceVideo} 个`)
			];
		}
	},
	{
		title: '昨日素材营收',
		width: '160px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.dayResourceIncome}`),
				h('div', {}, `照片收益：¥ ${row.dayResourcePhotoIncome}`),
				h('div', {}, `视频收益：¥ ${row.dayResourceVideoIncome}`)
			];
		}
	},
	{
		title: '昨日探店营收',
		width: '160px',
		render(row) {
			return [
				h('div', {}, `总收益：¥ ${row.dayShopAllIncome}`),
				h('div', {}, `探店收益：¥ ${row.dayShopIncome}`),
				h('div', {}, `商品收益：¥ ${row.dayProductIncome}`)
			];
		}
	},
	{
		title: '操作',
		width: '230px',
		render(row, index) {
			return [
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () => handelProductDetails(row)
					},
					{ default: () => '详情' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () =>
							router.push({
								path: '/resource-apply/findListWithAdmin',
								query: { productId: row.productId }
							})
					},
					{ default: () => '素材订单' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () =>
							router.push({
								path: '/apply-review/findListWithAdmin',
								query: { keyWord: row.productId }
							})
					},
					{ default: () => '探店订单' }
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: { marginRight: '8px', fontSize: '14px' },
						onClick: () =>
							router.push({ path: '/material/library', query: { keyWord: row.productId } })
					},
					{ default: () => '素材库' }
				)
			];
		}
	}
];
const tabelData = ref([]);
const tableLoading = ref(false);
// 分页
const creatorPagination = reactive({
	page: 1,
	pageSize: creatorFormValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		creatorPagination.page = page;
		creatorFormValue.pageIndex = page;
		fetchCreatorData();
	},
	onPageSizeChange: (pageSize) => {
		creatorPagination.pageSize = pageSize;
		creatorFormValue.pageSize = pageSize;
		creatorFormValue.pageIndex = 1;
		creatorPagination.page = 1;
		fetchCreatorData();
	}
});
const goodsPagination = reactive({
	page: 1,
	pageSize: goodsFormValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		goodsPagination.page = page;
		goodsFormValue.pageIndex = page;
		fetchGoodData();
	},
	onPageSizeChange: (pageSize) => {
		goodsPagination.pageSize = pageSize;
		goodsFormValue.pageSize = pageSize;
		goodsFormValue.pageIndex = 1;
		goodsPagination.page = 1;
		fetchGoodData();
	}
});
// 获取创作者维度
const fetchCreatorData = async () => {
	tableLoading.value = true;
	columns.value = creatorColumns;
	let params = JSON.parse(JSON.stringify(creatorFormValue));
	delete params.applyTime;
	const { code, data } = await getCreatorList(params);
	if (code === 200) {
		// debugger;
		tabelData.value = data.manageList || [];
		creatorPagination.itemCount = data.total || 0;
		if (data.manageList) {
			updateDate.value = data.manageList[0].optTime;
		}
	}
	tableLoading.value = false;
};
// 获取商品维度
const fetchGoodData = async () => {
	tableLoading.value = true;
	columns.value = goodsColumns;
	const { code, data } = await getGoodsList(goodsFormValue);
	if (code === 200) {
		tabelData.value = data.data;
		goodsPagination.itemCount = data.rowCount;
		if (data.data.length) {
			updateDate.value = data.data[0].optTime;
		}
	}
	tableLoading.value = false;
};
// 获取数据
const fetchData = async () => {
	tabFlag.value === 1 ? fetchCreatorData() : fetchGoodData();
};
// 重置
const handelReset = () => {
	resetData();
	fetchData();
};
// 初始化数据
const resetData = () => {
	if (tabFlag.value === 1) {
		creatorPagination.page = 1;
		creatorPagination.pageSize = 10;
	}
	if (tabFlag.value === 2) {
		goodsPagination.page = 1;
		goodsPagination.pageSize = 10;
	}
	creatorFormValue.pageIndex = 1;
	creatorFormValue.pageSize = 10;
	creatorFormValue.endDate = null;
	creatorFormValue.keyWord = null;
	creatorFormValue.startDate = null;
	creatorFormValue.status = null;
	creatorFormValue.applyTime = null;
	goodsFormValue.search = null;
};
nextTick(() => {
	fetchData();
});
// 监听路由变化
watch(
	() => route.fullPath,
	(n, o) => {
		creatorPagination.page = 1;
		resetData();
		fetchData();
	}
);
// 启用禁用
const changeStatus = ref({
	flag: false,
	content: null,
	status: null,
	userId: null
});
const handleStatusChecked = (row) => {
	changeStatus.value.flag = true;
	changeStatus.value.userId = row.userId;
	if (row.status === 1) {
		changeStatus.value.content = '确认禁用该创作者账号';
		changeStatus.value.status = 1;
	} else if (row.status === 0) {
		changeStatus.value.content = '确认启用该创作者账号';
		changeStatus.value.status = 0;
	}
};
const handleStatusConfirm = debounce(() => {
	showOrDisabled({ clientUserId: changeStatus.value.userId }).then((res) => {
		if (res.code === 200) {
			changeStatus.value.flag = false;
			fetchCreatorData();
			message.success('操作成功');
		} else {
			message.error('操作失败');
		}
	});
}, 300);
// 查看详情
const productDetailsModal = ref(false);
const productId = ref(0);
const handelProductDetails = (res) => {
	productDetailsModal.value = true;
	productId.value = res.productId;
};
</script>

<style lang="less" scoped>
.creator {
	overflow-x: auto;
	display: -webkit-box;
	height: 100%;
	background: #fff;
	padding: 10px;
	&-container {
		padding: 0 10px 10px;
		background: linear-gradient(180deg, #f3f6ff 0%, #fcfdff 100%);
		border-radius: 8px;
		border: 1px solid #f0f0f0;
		height: 100%;
		&-top {
			line-height: 60px;
			&-btns {
				button {
					color: #333333;
					font-family: PingFangSC-Medium, PingFang SC;
					width: 132px;
					font-size: 16px;
				}
				.active {
					color: #1d6fe9;
					box-sizing: border-box;
					border-top: 4px solid #1d6fe9;
					background: linear-gradient(#dee6ff 0%, rgba(225, 232, 255, 0) 100%);
				}
			}
			&-date {
				font-size: 12px;
				font-family: PingFangSC-Medium, PingFang SC;
				color: #f5894e;
			}
		}
		&-page {
			&-search {
				padding: 9px 12px;
				background: #f5f5f5;
				border-radius: 4px;
				border: 1px solid #f0f0f0;
			}
			&-table {
				overflow: hidden;
				flex: 1 1 0%;
			}
		}
	}
}
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.flex-col {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.justify-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex-1 {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0%;
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
}
.mt-1 {
	margin-top: 0.25rem; /* 4px */
}
.mt-2 {
	margin-top: 0.5rem; /* 8px */
}
.ml-1 {
	margin-left: 0.25rem; /* 4px */
}
.justify-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
</style>
